<template>
  <div id="acceptanceList">
    <Filters block :form="searchForm" :filterData="filterData" @confirm="changePage(1)"/>
    <a-spin :spinning="spinning">
    <div class="container">
      <template v-for="(item,index) in dataList" v-key="index">
        <div v-bind:key="index" class="tableWrap">
          <div class="tableHeard dataTopWrap">
            <div class="dataTopLeft">
                <div>流水单号：{{item.orderSn}}</div>
                <div>项目名称：{{item.projectName}}</div>
                <div>订单状态：{{satesArr[item.orderStatus]}}</div>
                <div>验收日期：{{item.auditDay}}</div>
            </div>
            <!-- <div class="pushBtn" :class="item.checkNum==0?'active':''" @click="item.checkNum==0?'':pushClick(index)">推送NC入库</div> -->
            <div class="pushBtn" @click="pushClick(index)">推送NC入库</div>
          </div>
          <div class="tablecontent">
              <div class="tablecontentTop" style="background: #fafafa;">
                <!-- <div class="select-icon">
                  <img :src="item.checkDetails && item.checkNum == item.checkDetails.length?require('@/assets/images/allgou-icon.png'):require('@/assets/images/gou-icon.png')" @click="allSelectClick(index,item.checkNum)"/>
                </div> -->
                <div class="table-column actives">物料编码</div>
                <div class="table-column actives">物料名称</div>
                <div class="table-column actives">单位</div>
                <div class="table-column actives">采购订单数量</div>
                <div class="table-column actives">已验收数量</div>
                <div class="table-column actives">可推送入库数量</div>
              </div>
              <template v-for="(items,indexs) in item.checkDetails" v-key="indexs">
                <div v-bind:key="indexs" class="tablecontentTop">
                  <!-- <div class="select-icon">
                    <img :src="items.flag?require('@/assets/images/allgou-icon.png'):require('@/assets/images/gou-icon.png')" @click="selectClick(items.flag,index,indexs)"/>
                  </div> -->
                  <div class="table-column">{{items.materialsNum?items.materialsNum:'--'}}</div>
                  <div class="table-column">{{items.materialsName?items.materialsName:'--'}}</div>
                  <div class="table-column">{{items.unit?items.unit:'--'}}</div>
                  <div class="table-column">{{items.orderNum?items.orderNum:'--'}}</div>
                  <div class="table-column">{{items.totalCheckNum?items.totalCheckNum:'--'}}</div>
                  <div class="table-column">{{items.checkNum?items.checkNum:'--'}}</div>
                </div>
              </template>
          </div>
        </div>
      </template>
      <template v-if="dataList.length==0">
        <a-empty />
      </template>
    </div>
    </a-spin>
  </div>
</template>
<script lang='ts'>
import { Confirm } from '@/decorator';
import { Component, Watch, Vue } from 'vue-property-decorator';
// checkPushPushOrderFetch
@Component
export default class acceptancePush extends Vue {
  Data: any[] = [];
  dataList:any[] = [];
  spinning:boolean= false
  isHttp:any = true
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  searchForm: any = {
    date: [],
    keyword: '',
    orderSn: ''
  }
  get filterData () {
    return {
      date: {
        label: '验收日期',
        type: 'daterange3',
        template: {
          clearable: true
        }
      },
      keyword: {
        label: '项目名称/请购部门',
        type: 'input',
        template: {
          clearable: true,
          placeholder: '请输入项目名称/请购部门'
        }
      },
      orderSn: {
        label: '订单流水号',
        type: 'input',
        template: {
          placeholder: '请输入订单流水号',
          clearable: true
        }
      }
    }
  }
  // get getSearchForm () {
  //   let {date, markTime} = this.searchForm
  //   let [makeStartTime, makeEndTime] = markTime
  //   let [checkStartTime, checkEndTime] = date
  //   return {
  //     ...this.searchForm
  //   }
  // }
  satesArr:any = {
    'djs': '待接收',
    'dfh': '待发货',
    'shz': '送货中',
    'ddgb': '订单关闭',
    'yjj': '已拒绝'
  };
  init () {
    this.getList();
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  // 全选
  allSelectClick (index:any, checkNum:any) {
    if (checkNum < this.dataList[index].checkDetails.length) {
      this.dataList[index].checkNum = this.dataList[index].checkDetails.length;
      checkNum < this.dataList[index].checkDetails.map((item: any) => {
        item.flag = true
      })
    } else {
      this.dataList[index].checkNum = 0;
      checkNum < this.dataList[index].checkDetails.map((item:any) => {
        item.flag = false
      })
    }
  }
  // 选择按钮
  selectClick (flag:any, index:any, indexs:any) {
    let num = 0;
    this.dataList[index].checkDetails[indexs].flag = !flag
    this.dataList[index].checkDetails.map((item:any) => {
      if (item.flag) {
        num += 1
      }
    })
    this.dataList[index].checkNum = num
  }
  getList () {
    let data = {
      orderSn: this.searchForm.orderSn,
      keyword: this.searchForm.keyword,
      startDate: this.searchForm.date[0],
      endDate: this.searchForm.date[1]
    }
    this.$api.checkPushOrderPushFetch(data).then((res: any) => {
      if (res.code === 0) {
        res.data.map((item:any) => {
            item.checkNum = 0
            item.checkDetails.map((items:any) => {
              items.flag = true
            })
        })
        this.dataList = res.data
      } else {
        this.dataList = []
      }
    }).catch(() => {
      this.dataList = []
    });
  }
  // 推送入库
  pushClick (index:any) {
    this.spinning = true
    let checkDetails:any = [];
    // this.isHttp = false
    this.dataList[index].checkDetails.map((item:any) => {
      if (item.flag) {
        checkDetails.push(item)
      }
    })
    let data = {
      projectName: this.dataList[index].projectName,
      orderStatus: this.dataList[index].orderStatus,
      orderSn: this.dataList[index].orderSn,
      orderId: this.dataList[index].orderId,
      checkDetails: checkDetails,
      auditDay: this.dataList[index].auditDay
    }
    // const hide = this.$message.loading('推送中', 2);
    this.$api.checkPushPushOrderFetch(data).then((res:any) => {
      // this.$message.loading('推送成功', 1)
      // setTimeout(hide, 2000);
      this.spinning = false
      this.$message.success('推送成功')
      setTimeout(() => {
        this.getList()
        // this.isHttp = true
      }, 1000);
    }).catch(() => {
      this.spinning = false
      // this.isHttp = true
      // setTimeout(hide, 1000);
    })
  }
}
</script>
<style lang='scss' scoped>
.active{
  background-color: rgb(206, 206, 206) !important;
}
.tableWrap{
  width: 100%;
  border: 1px solid #e8e8e8;
  margin-bottom: 30px;
}
.tableHeard{
  height: 58px;
  padding: 0 16px;
}
.tablecontentTop{
  display: flex;
  height: 46px;
  align-items: center;
  border-top: 1px solid #e8e8e8;
  div{
    border-right:1px solid #e8e8e8;
  }
  div:nth-child(7){
    border-right:none;
  }
  .actives{
    font-weight: bold;
  }
  .table-column{
    flex: 1;
    height: 100%;
    line-height: 46px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
}
.select-icon{
  display: flex;
  justify-content: center;
  align-items: center;
  width:88px;
  height:46px;
  img{
    width:22px;
    height:22px;
  }
  :hover{
    cursor: pointer;
  }
}

.dataTopWrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dataTopLeft{
    display: flex;
    div{
        margin-right: 50px;
    }
}
.pushBtn{
  background: rgb(53, 125, 219);
  color: #fff;
  padding: 5px 16px;
  border-radius: 6px;
}
.pushBtn:hover{
  cursor: pointer;
}
</style>
